<template>
  <div class="app-container">
    <h4 class="form-header h4" style="margin-top: 10px">订单编号</h4>
    <el-form ref="form" label-width="80px">
      <el-form-item label="订单编号" prop="nickName">
        <el-input v-model="order.orderNum" disabled readonly/>
      </el-form-item>
    </el-form>
    <h4 class="form-header h4" style="margin-top: 10px">指派用户</h4>
    <el-row :gutter="20">
      <!--部门数据-->
      <el-col :span="4" :xs="24">
        <div class="head-container">
          <el-input
            v-model="deptName"
            placeholder="请输入名称"
            clearable
            size="small"
            prefix-icon="el-icon-search"
            style="margin-bottom: 20px"
          />
        </div>
        <div class="head-container">
          <el-tree
            :data="deptOptions"
            :props="defaultProps"
            :expand-on-click-node="false"
            :filter-node-method="filterNode"
            ref="tree"
            node-key="id"
            default-expand-all
            highlight-current
            @node-click="handleNodeClick"
          />
        </div>
      </el-col>
      <!--用户数据-->
      <el-col :span="20" :xs="24">
        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="68px">
          <el-form-item label="用户名称" prop="userName">
            <el-input
              v-model="queryParams.userName"
              placeholder="请输入用户名称"
              clearable
              style="width: 240px"
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item label="手机号码" prop="phonenumber">
            <el-input
              v-model="queryParams.phonenumber"
              placeholder="请输入手机号码"
              clearable
              style="width: 240px"
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item label="状态" prop="status">
            <el-select
              v-model="queryParams.status"
              placeholder="用户状态"
              clearable
              style="width: 240px"
            >
              <el-option
                v-for="dict in dict.type.sys_normal_disable"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="创建时间">
            <el-date-picker
              v-model="dateRange"
              style="width: 240px"
              value-format="yyyy-MM-dd"
              type="daterange"
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            ></el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>

        <el-table v-loading="loading" :data="userList">
          <el-table-column label="用户编号" align="center" key="userId" prop="userId"/>
          <el-table-column label="用户名称" align="center" key="userName" prop="userName"
                           :show-overflow-tooltip="true"/>
          <el-table-column label="用户昵称" align="center" key="nickName" prop="nickName"
                           :show-overflow-tooltip="true"/>
          <el-table-column label="手机号码" align="center" key="phonenumber" prop="phonenumber" width="120"/>
          <el-table-column label="创建时间" align="center" prop="createTime" width="160">
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.createTime) }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            align="center"
            width="160"
            class-name="small-padding fixed-width"
          >
            <template slot-scope="scope" v-if="scope.row.userId !== 1">
              <el-button
                size="mini"
                type="text"
                icon="el-icon-edit"
                @click="assignOrder(scope.row)"
                v-hasPermi="['system:user:edit']"
              >指派
              </el-button>
            </template>
          </el-table-column>
        </el-table>

        <pagination
          v-show="total>0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {deptTreeSelect, listUser} from "@/api/system/user";
import editStaff from "@/views/person/staff/computed/editStaff.vue";
import addStaff from "@/views/person/staff/computed/addStaff.vue";
import {assignOrders, getVhiceodr} from "@/api/merchant/order";
import {Message} from "element-ui";

export default {
  name: "assignOrder",
  components: {addStaff, editStaff},
  dicts: ['sys_normal_disable', 'sys_user_sex'],
  data() {
    return {
      userList: [],
      deptOptions: undefined,
      // 日期范围
      dateRange: [],
      defaultProps: {
        children: "children",
        label: "label"
      },
      deptName: '',
      queryParams: {
        userName: '',
        phonenumber: '',
        status: '',
      },
      loading: false,
      total: 0,
      visible: false,
      order: {
        orderId: '',
        orderNum: '',
        orderStatus: '',
        uid: '',
        remark: ''
      }
    }
  }, methods: {
    /** 查询部门下拉树结构 */
    getDeptTree() {
      deptTreeSelect().then(response => {
        this.deptOptions = response.data;
      });
    },
    assignOrder(row) {
      this.$prompt('请输入备注信息', "备注", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        closeOnClickModal: false,
        inputPattern: /^.{0,20}$/,
        inputErrorMessage: "备注信息必须小于20",
        inputValidator: (value) => {
          if (/<|>|"|'|\||\\/.test(value)) {
            return "不能包含非法字符：< > \" ' \\\ |"
          }
        },
      }).then(({value}) => {
        this.order.remark = value
        this.order.uid = row.userId
        assignOrders(this.order).then(response => {
          if (response.code == 200) {
            Message.success("指派成功")

          }
        })
      }).catch(() => {
      });

    },
    /** 重置按钮操作 */
    resetQuery() {
      this.dateRange = [];
      this.resetForm("queryForm");
      this.queryParams.deptId = undefined;
      this.$refs.tree.setCurrentKey(null);
      this.handleQuery();
    },
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    getList() {
      this.loading = true;
      listUser(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
          this.userList = response.rows;
          this.total = response.total;
          this.loading = false;
        }
      );
    },
    // 筛选节点
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    // 节点单击事件
    handleNodeClick(data) {
      this.queryParams.deptId = data.id;
      this.handleQuery();
    },
    getOrder(orderNum) {
      getVhiceodr(orderNum).then(response => {
        if (response.code == 200) {
          if (!response.data) {
            this.$router.push("/404")
          }
          this.order.orderId = response.data.id
          this.order.orderNum = response.data.orderNum
          this.order.orderStatus = response.data.status
        }
      })
    }
  },
  watch: {
    // 根据名称筛选部门树
    deptName(val) {
      this.$refs.tree.filter(val);
    }
  },
  created() {
    this.order.orderNum = this.$route.query && this.$route.query.orderNum;
    this.getOrder(this.order.orderNum)
    this.getDeptTree()
    this.getList()
    console.log('order', this.order)
    // if (!this.order.orderNum||!this.order.orderId){
    //   this.$router.push("/404")
    // }
  }
}
</script>
<style scoped lang="scss">

</style>
